import React, {useEffect, useState} from "react";
import {Button, Image, View,} from "@tarojs/components";

import Taro from "@tarojs/taro";

import {Popup, Radio} from "@taroify/core";
import styles from "./index.module.scss";

import headUrl from '@/app/asserts/head.jpg';
import {query, submit} from "@/_framework/services/Data";
import {getStorageSync, infoToast} from "@/_framework/services/Taro";
import {doPostAuth} from "@/_framework/services/Login";
import {goBack, goXy} from "@/_framework/services/Go";
import Profile from "@/_framework/pages/authorize/Profile";

const Authorize: React.FC<any> = ({}) => {
    const [step, setStep] = useState(1);
    const [confirmXy, setConfirmXy] = useState(false);
    const [confirmRadio, setConfirmRadio] = useState(2);

    const [showProfile, setShowProfile] = useState(false);
    const [head, setHead] = useState<any>('');


    useEffect(() => {
        load();
    }, []);


    const load = async () => {
        const {avatar} = await query('turing/userInfo/getAuthInfo')
        setHead(avatar || headUrl)
        if (getStorageSync("step")) {
            setStep(2);
        }
    };


    const getUserProfile = async () => {

        if (!confirmXy) {
            infoToast("请确认协议内容")
            return
        }
        setShowProfile(true)

    };

    const getPhoneNumber = async ({detail}) => {
        if (!confirmXy) {
            infoToast("请确认协议内容")
            return
        }

        const {errMsg, iv, encryptedData} = detail;
        console.log("getPhoneNumber", detail)

        if (errMsg != "getPhoneNumber:ok") {
            infoToast("获取手机号失败")
            return;
        }
        const result = await submit("turing/userInfo/register", {
            iv,
            encryptedData,
        });
        if (result) {
            await doPostAuth({});
        }
        setStep(2);
        Taro.setStorageSync("step", 2)

    };


    return (
        <>
            <View className={styles.page}>
                <View className={styles.page_head}>
                    <Image className={styles.image} src={head}></Image>
                </View>
                <View className={styles.page_body}>
                    {
                        step == 1 && (
                            <>
                                {
                                    !confirmXy && (
                                        <Button
                                            className={styles.button}
                                            type="primary"
                                            onClick={() => {
                                                infoToast("请确认协议内容")
                                            }}
                                        >
                                            一键登录 (1/2)
                                        </Button>
                                    )

                                }
                                {
                                    confirmXy && (
                                        <Button
                                            className={styles.button}
                                            type="primary"
                                            openType='getPhoneNumber' onGetPhoneNumber={(e) => getPhoneNumber(e)}
                                        >
                                            一键登录 (1/2)
                                        </Button>
                                    )
                                }
                            </>
                        )
                    }
                    {
                        step == 2 && (
                            <Button
                                className={styles.button}
                                type="primary"
                                onClick={() => getUserProfile()}
                            >
                                一键登录 (2/2)
                            </Button>
                        )
                    }

                </View>

            </View>
            <View className={styles.page_foot}>
                <View className={styles.page_foot_radio}>
                    <Radio.Group value={confirmRadio} onClick={() => {
                        setConfirmRadio(1)
                        setConfirmXy(true)
                    }} direction="horizontal">
                        <Radio name={1} size={16}> </Radio>
                    </Radio.Group>
                </View>
                <View>我已阅读并同意</View>
                <View className={styles.foot_xy}>
                    <View onClick={() => goXy()} className={styles.foot_xy_txt}>
                        《用户协议》
                    </View>

                </View>
            </View>

            <Popup
                rounded lock placement='bottom'
                onClose={() => setShowProfile(false)} open={showProfile}
            >
                <Popup.Close></Popup.Close>
                <Profile onSuccess={async () => {
                    setShowProfile(false)
                    await goBack()
                }}></Profile>
            </Popup>
        </>
    );
};

export default Authorize;
